<template>
  <div class="container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px"
             class="search">
      <el-form-item label="设备编码" prop="deviceName">
        <el-input v-model="queryParams.deviceName" placeholder="请输入设备编码" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="设备状态" prop="deviceStatus">
        <el-select v-model="queryParams.deviceStatus" placeholder="请选择设备状态" clearable size="small">
          <el-option label="正常" :value="'normal'"></el-option>
          <el-option label="报警" :value="'alarming'"></el-option>
          <el-option label="预警" :value="'preAlarming'"></el-option>
          <el-option label="离线" :value="'offline'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报警类型" prop="alarmSwitch" v-if="tableVisible===false">
        <el-select v-model="queryParams.alarmSwitch" placeholder="请选择报警类型" clearable size="small">
          <el-option label="离线报警" :value="1"></el-option>
          <el-option label="超限报警" :value="2"></el-option>
          <el-option label="复归通知" :value="4"></el-option>
          <el-option label="离线报警+超限报警" :value="3"></el-option>
          <el-option label="离线报警+复归通知" :value="5"></el-option>
          <el-option label="超限报警+复归通知" :value="6"></el-option>
          <el-option label="离线报警+超限报警+复归通知" :value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item class="search-btn">
        <el-button type="primary" size="medium" @click="tableVisible =true">图表</el-button>
        <el-button size="medium" @click="tableVisible=false">列表</el-button>
      </el-form-item>
    </el-form>
    <!-- 图表 -->
    <div v-if="tableVisible" class="card-panel">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :lg="6" v-for="(item, index) in pageData" :key="index">
          <div class="card-panel-list">
            <div class="card-panel-top">
              <div class="card-panel-title">
                设备信息
              </div>
              <el-divider/>
              <el-descriptions :column="1" :label-style="{'color': '#999999' }">
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/equipment.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备名称
                  </template>
                  <dict-tag :type="DICT_TYPE.RK_DEVICE_TYPE" :value="item.deviceAddr"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/id.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备编码
                  </template>
                  {{ item.deviceName }}
                </el-descriptions-item>
                <el-descriptions-item contentStyle="color:#1BBC8B">
                  <template slot="label">
                    <img src="@/assets/images/computer.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备状态
                  </template>
                  {{
                    item.deviceStatus === 'normal' ? '正常' : item.deviceStatus === 'alarming' ? '报警' : item.deviceStatus === 'preAlarming' ? '预警' : '离线'
                  }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/time.png" alt="" style="padding-right: 5px;  margin:auto 0">
                    报警类型
                  </template>
                  {{
                    item.alarmSwitch === 1 ? '离线报警' : item.alarmSwitch === 2 ? '超限报警' : item.alarmSwitch === 4 ? '复归通知' : item.alarmSwitch === 3 ? '离线报警+超限报警' : item.alarmSwitch === 5 ? '离线报警+复归通知' : item.alarmSwitch === 6 ? '超限报警+复归通知' : '离线报警+超限报警+复归通知'
                  }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/address.png" alt="" style="padding-right: 5px; margin:auto 0">
                    地址
                  </template>
                  庐江县同大镇
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="card-panel-bottom" @click="handleDetail(item)">
              <el-button size="mini" type="text">历史数据</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        background
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div v-else class="card-panel">
      <el-card style="padding-top: 30px">
        <!-- 列表 -->
        <el-table v-loading="loading" :data="pageData">
          <el-table-column label="设备名称" align="center" prop="deviceAddr">
            <template v-slot="scope">
              <dict-tag :type="DICT_TYPE.RK_DEVICE_TYPE" :value="scope.row.deviceAddr"/>
            </template>
          </el-table-column>
          <el-table-column label="设备编码" align="center" prop="deviceName"/>
          <el-table-column label="是否保存报警数据" align="center" prop="alarmRecord">
            <template v-slot="scope">
              {{ scope.row.alarmRecord === 0 ? '不保存' : '保存' }}
            </template>
          </el-table-column>
          <el-table-column label="设备状态" align="center" prop="alarmDelay">
            <template v-slot="scope">
              {{
                scope.row.deviceStatus === 'normal' ? '正常' : scope.row.deviceStatus === 'alarming' ? '报警' : scope.row.deviceStatus === 'preAlarming' ? '预警' : '离线'
              }}
            </template>
          </el-table-column>
          <el-table-column label="报警类型" align="center" prop="alarmSwitch" min-width="150px">
            <template v-slot="scope">
              {{
                scope.row.alarmSwitch === 1 ? '离线报警' : scope.row.alarmSwitch === 2 ? '超限报警' : scope.row.alarmSwitch === 4 ? '复归通知' : scope.row.alarmSwitch === 3 ? '离线报警+超限报警' : scope.row.alarmSwitch === 5 ? '离线报警+复归通知' : scope.row.alarmSwitch === 6 ? '超限报警+复归通知' : '离线报警+超限报警+复归通知'
              }}
            </template>
          </el-table-column>
          <el-table-column label="当前设备所处经度" align="center" prop="lng"/>
          <el-table-column label="当前设备所处纬度" align="center" prop="lat"/>
          <el-table-column label="是否标记经纬度" align="center" prop="useMarkLocation">
            <template v-slot="scope">
              {{ scope.row.useMarkLocation ? '是' : '否' }}
            </template>
          </el-table-column>

          <el-table-column label="报警延时(min)" align="center" prop="alarmDelay"/>
          <el-table-column label="离线判断间隔" align="center" prop="offlineinterval"/>
          <el-table-column label="保存数据间隔" align="center" prop="savedatainterval"/>
        </el-table>
        <el-pagination
          background
          style="margin-top: 12px;text-align: right;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRkData, getRkInfoList } from '@/api/equipment/info'
import { DICT_TYPE, getDictData } from '@/utils/dict'

export default {
  name: 'Info',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 总条数
      total: 0,
      // 设备信息列表
      tableData: [],
      pageData: [],
      // 当前数据列表
      nowData: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      currentPage: 1,
      pageSize: 8,
      // 查询参数
      queryParams: {
        deviceStatus: undefined,
        alarmSwitch: undefined,
        deviceName: undefined
      },
      tableVisible: true
    }
  },
  created() {
    this.getList()
  },
  watch: {
    tableVisible(val) {
      if (val) {
        this.pageSize = 8
      } else {
        this.pageSize = 10
      }
      this.currentPage = 1
      this.resetForm('queryForm')
      this.getList()
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getRkInfoList().then(response => {
        let arr = response.data
        this.loading = false
        getRkData().then(resp => {
          resp.data.forEach(k => {
            arr.map((item) => {
              if (item.deviceAddr === k.deviceAddr) {
                item.deviceStatus = k.deviceStatus
              }
              return item
            })
          })
          this.tableData = arr.filter(item => {
            let waterArr = [21061727, 21061733]
            return waterArr.indexOf(item.deviceAddr) !== -1
          })
          this.nowData = this.tableData
          this.total = this.nowData.length
          this.pageData = this.queryByPage()
        })
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.currentPage = 1
      const productFilter = (data, params) => data.filter((item) => {
        return Object.keys(params).every(function(key) {
          return !params[key] || item[key] === params[key]
        })
      })
      this.nowData = productFilter(this.tableData, this.queryParams)
      this.total = this.nowData.length
      this.pageData = this.queryByPage()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.currentPage = 1
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleDetail(item) {
      const id = item.deviceName
      this.$router.push({
        path: '/irrigation/waterQuality/details',
        query: {
          id: id,
        }
      })
    },
    // 改变每页大小的回调
    handleSizeChange(val) {
      this.pageSize = val
      this.pageData = this.queryByPage()
    },
    // 改变当前页的回调
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageData = this.queryByPage()
    },
    // 实现分页的方法
    queryByPage() {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize
      return this.nowData.slice(start, end)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  min-height: calc(100vh - 86px);

  .search {
    padding: 32px 0;
    height: 100px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 24px;

    .search-btn {
      float: right;
      padding-right: 40px;

      .el-button--primary {
        background: #4362ff;
        border-color: #4362ff;
      }

      .el-button--default {
        color: #4362ff;
        border-color: #4362ff;
      }
    }
  }

  .card-panel {
    .card-panel-list {
      margin: 15px 0;
      height: 350px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgba(67, 98, 255, 0.2);
      border-radius: 10px;
      position: relative;

      .card-panel-top {
        padding: 20px;

        .card-panel-title {
          border-left: 5px solid #4362ff;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
        }
      }

      .card-panel-bottom {
        padding: 20px 30px;
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #f5f8ff;
        border-radius: 0 0 10px 10px;

        .el-button--text {
          color: #4362ff;
          font-size: 16px;
        }
      }
    }

    .pagination {
      margin: 30px auto;
      width: 500px;
      padding: 32px 16px;
    }
  }
}
</style>
